<template>
  <div class="flex date-range">
    <el-segmented
      class="mr-3"
      v-if="showTools"
      v-model="dateValue"
      :options="options"
    />
    <el-date-picker
      class="max-w-[300px]"
      v-model="dateTime"
      type="daterange"
      @change="handleDateChange"
      value-format="YYYY-MM-DD"
      :clearable="clearable"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :disabled-date="(date: Date) => date > new Date()"
    ></el-date-picker>
  </div>
</template>

<script setup lang="ts">
import { timeFormat } from "@/utils/formatTime"
import { ref, watch } from "vue"
import { message } from "@/Hooks/Element-plus"

const dateValue = ref("最近七天")
const options = ["今日", "昨日", "最近七天", "本月", "上月"]

function getTimeRanges(): { [key: string]: [string, string] } {
  const today = new Date()
  const yesterday = new Date(today)
  yesterday.setDate(today.getDate() - 1)

  const lastSevenDaysStart = new Date(today)
  lastSevenDaysStart.setDate(today.getDate() - 6)

  const thisMonthStart = new Date(today.getFullYear(), today.getMonth(), 1)
  const thisMonthEnd = new Date(today.getFullYear(), today.getMonth() + 1, 0)

  const lastMonthStart = new Date(today.getFullYear(), today.getMonth() - 1, 1)
  const lastMonthEnd = new Date(today.getFullYear(), today.getMonth(), 0)

  return {
    今日: [timeFormat(today), timeFormat(today)],
    昨日: [timeFormat(yesterday), timeFormat(yesterday)],
    最近七天: [timeFormat(lastSevenDaysStart), timeFormat(today)],
    本月: [timeFormat(thisMonthStart), timeFormat(thisMonthEnd)],
    上月: [timeFormat(lastMonthStart), timeFormat(lastMonthEnd)],
  } as any
}

watch(
  () => dateValue.value,
  (key) => {
    dateTime.value = getTimeRanges()[key]
    emits("update:modelValue", dateTime.value)
    emits("change")
  },
)

const emits = defineEmits(["change", "update:modelValue"])
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
  showTools: {
    type: Boolean,
    default: false,
  },
  defaultValue: {
    type: Array,
    default: () => [],
  },
  clearable: {
    type: Boolean,
    default: false,
  },
})

function getSevenDaysAgo(): string {
  const today = new Date()
  const sevenDaysAgo = new Date(today)
  sevenDaysAgo.setDate(today.getDate() - 7) // 将日期减去7天
  return timeFormat(sevenDaysAgo) as string
}

const dateTime = ref([getSevenDaysAgo(), timeFormat(new Date())])

if (props.modelValue.length == 0 && props.defaultValue.length == 0) {
  emits("update:modelValue", dateTime.value)
} else {
  dateTime.value = props.defaultValue as any
}

const handleDateChange = (dates: [Date | string, Date | string]) => {
  if (dates && dates.length === 2) {
    const startDate = timeFormat(dates[0], null) as Date
    const endDate = timeFormat(dates[1], null) as Date
    const diffInDays =
      (endDate.getTime() - startDate.getTime()) / (1000 * 3600 * 24)

    if (diffInDays > 31) {
      // 如果选择的日期范围超过 31 天，重置为 31 天
      const newEndDate = new Date(startDate)
      newEndDate.setDate(startDate.getDate() + 31)
      dateTime.value = [timeFormat(startDate), timeFormat(newEndDate)]
      message("error", "选择的日期范围不能超过 31 天")
    }

    emits("update:modelValue", dateTime.value)
    emits("change")
  }
}
</script>

<style lang="scss" scoped>
.date-range {
  :deep(.el-segmented) {
    --el-segmented-item-selected-bg-color: #ffe6e6;
    --el-segmented-item-selected-color: var(--el-color-primary);
    --el-segmented-bg-color: #f5f7fa;
    --el-segmented-color: #222;

    .el-segmented__item {
      min-width: 84px;
    }
  }
}
</style>
